@extends('layouts.app')

@section('web_title','预约中心')

@section('css')
    <link rel="stylesheet" href="{{ asset('css/reservation.css') }}">
    <link rel="stylesheet" href="{{ asset('css/main.css') }}">
@endsection

@section('content')
    <!--内容区域-->
    <div class="row">
        <div class="col-xs-12 content-box">
            <!--填充内容区域-->
            <!--切换标签栏-->
            <div class="row margin-lr-0 reservationCenterNav">
                <div class="col-xs-12 background-white">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" id="reservationCenterNav">
                        <li class="active" data-load="no" data-page="reservationList"><a href="#reservationList" role="tab" data-toggle="tab">预约列表</a><i></i></li>
                        <li data-load="no" data-page="statistical"><a href="#statistical" role="tab" data-toggle="tab">统计</a><i></i></li>
                        <li data-load="no" data-page="patientPool"><a href="#patientPool" role="tab" data-toggle="tab">患者池</a><i></i></li>
                        <li data-load="no" data-page="messageCenter"><a href="#messageCenter" role="tab" data-toggle="tab">信息中心</a><i></i><b data-num="0"></b></li>
                    </ul>
                </div>
            </div>
            <div class="row  margin-top-15">
                <div class="col-xs-12">
                    <!-- Tab panes -->
                    <div class="tab-content bg-body-gray">
                        <!--预约列表页面-->
                        <div role="tabpanel" class="tab-pane active" id="reservationList">
                            <!--搜索栏-->
                            <div class="row">
                                <div class="col-xs-12 background-white">
                                    <div class="row searchBox" id="listQuery">
                                        <div class="col-xs-3 dataSerialize margin-bottom-15">
                                            <span>姓名</span>
                                            <input maxlength="16" type="text" class="form-control but_Fonts" placeholder="请输入姓名"
                                                   name="name">
                                        </div>
                                        <div class="col-xs-3 dataSerialize margin-bottom-15">
                                            <span>手机号</span>
                                            <input maxlength="11" type="number" class="form-control phoneLength but_Fonts" placeholder="请输入手机号" name="phone">
                                        </div>
                                            <div class="col-xs-3 dataSerialize margin-bottom-15">
                                                <span>医院</span> <!-- 如果不是管理员用户只显示自己所在医院 -->
                                                <select class="form-control m-b margin-bottom-0 but_Fonts" name="hospital_id">
                                                    @if($hospitals instanceof \Illuminate\Database\Eloquent\Collection)
                                                        @foreach($hospitals as $hospital)
                                                            <option value="{{ $hospital->id }}">{{ $hospital->name }}</option>
                                                        @endforeach
                                                    @else
                                                        <option value="{{ $hospitals->id }}">{{ $hospitals->name }}</option>
                                                    @endif
                                                </select>
                                            </div>
                                        <div class="col-xs-3 dataSerialize margin-bottom-15">
                                            <span>医生</span> <!-- 如果不是管理员用户只显示医生自己 -->
                                            <select class="form-control m-b margin-bottom-0 but_Fonts" name="doctor_id">
                                                @if($doctors instanceof \Illuminate\Database\Eloquent\Collection)
                                                    <option value="">请选择</option>
                                                    @foreach($doctors as $doctor)
                                                        <option value="{{ $doctor->id }}">{{ $doctor->name }}</option>
                                                    @endforeach
                                                @else
                                                    <option value="{{ $doctors->id }}">{{ $doctors->name }}</option>
                                                @endif
                                            </select>
                                        </div>

                                        <div class="col-xs-3 dataSerialize">
                                            <span>状态</span>
                                            <select class="form-control m-b margin-bottom-0 but_Fonts" name="status">
                                                <option value="">请选择</option>
                                                <option value="1">未发送</option>
                                                <option value="2">已发送</option>
                                            </select>
                                        </div>
                                        <div class="col-xs-3 width-050 dataSerialize">
                                            <span>预约日期</span>
                                            <div class="periodTime">
                                                <input type="text" class="form-control limitStartData but_Fonts" data-toggle="datepicker" placeholder="开始时间" data-name="times" name="start_time">
                                                <span>至</span>
                                                <input type="text" class="form-control limitStartData but_Fonts" data-toggle="datepicker" placeholder="结束时间" data-name="times" name="end_time">
                                            </div>
                                        </div>
                                        <div class="col-xs-11 text-right width-095 margin-top-10">
                                            <button type="button" class="btn btn-primary but_Fonts" data-id="listQuery" id="listQueryBtn">查询</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 按钮操作栏 -->
                            <div class="row padding-tb-20 operationBtnBox" id="listOperationBtnBox">
                                <div class="col-xs-12">
                                    <button type="button" class="btn btn-primary addReservationBtn but_Fonts"
                                            data-url="{{ route('manage.view.index') }}">添加预约
                                    </button>
                                    {{--<button type="button" class="btn btn-primary editClinicBtn">修改诊室</button>--}}
                                    {{--<button type="button" class="btn btn-primary sendAppMessageBtn">推送消息</button>--}}
                                    <button type="button" class="btn btn-primary sendPhoneMessageBtn but_Fonts">发送短信</button>
                                    <button type="button" class="btn btn-primary removeReservationBtn but_Fonts">解除预约</button>
                                </div>
                            </div>
                            <!--患者列表-->
                            <div class="row">
                                <div class="col-xs-12 reservationListBox">
                                    <table class="table-bordered table-hover text-center reservationCenter-table reservationList-table">
                                        <thead>
                                        <tr>
                                            <th>
                                                <lable><input type="checkbox" class="checkBox" data-id="reservationListBody"></lable>
                                            </th>
                                            <th>姓名</th>
                                            <th>性别</th>
                                            <th>年龄</th>
                                            <th>手机号</th>
                                            <th>预约时间</th>
                                            <th>预约医生</th>
                                            <th>诊室</th>
                                            <th>预约状态</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="reservationListBody"></tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row margin-top-15">
                                <div class="col-xs-12 pagerBox text-right">
                                    <nav>
                                        <ul class="pagination pagination-lg" id="listPager"></ul>
                                    </nav>
                                </div>
                            </div>
                            <div class="modal fade" tabindex="-1" id="viewCaseModal" role="dialog" aria-labelledby="gridSystemModalLabel">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <form class="form-horizontal">
                                                <label for="witch_record" class="col-sm-2 control-label">选择病历</label>
                                                <div class="col-sm-4">
                                                    <select class="form-control" name="record_id" id="witch_record"></select>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="modal-body">
                                            <img src="{{ asset('images/loading.gif') }}">
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关 闭</button>
                                        </div>
                                    </div><!-- /.modal-content -->
                                </div><!-- /.modal-dialog -->
                            </div><!-- /.modal -->
                        </div>

                        <!--统计页面-->
                        <div role="tabpanel" class="tab-pane" id="statistical">
                        @if($user->isDoctor())
                                <!--医生统计页面-->
                                <div class="userStatistics">
                                    <div class="row">
                                        <div class="col-xs-2 contentBox addReservationBox" data-url="{{ route('manage.view.index') }}">
                                            <span class="add"><img src="{{ asset('images/addReservation.png') }}"></span>
                                            <span class="text">添加预约</span>
                                        </div>
                                        <div class="col-xs-10">
                                            <div class="row" id="statisticalNumber">
                                                <div class="col-xs-4 viewReservation contentBox margin-left" data-time="am">
                                                    <div class="proportion morning"><span>0</span>%</div>
                                                    <div class="rightNumber morningRightNumber">
                                                        <p><span>0</span>人</p>
                                                        <span class="periodTime morning">上午</span>
                                                    </div>
                                                </div>
                                                <div class="col-xs-4 viewReservation contentBox margin-left" data-time="pm">
                                                    <div class="proportion afternoon"><span>0</span>%</div>
                                                    <div class="rightNumber afternoonRightNumber">
                                                        <p><span>0</span>人</p>
                                                        <span class="periodTime afternoon">下午</span>
                                                    </div>
                                                </div>
                                                <div class="col-xs-4 viewReservation contentBox margin-left">
                                                    <div class="proportion all"><span>100</span>%</div>
                                                    <div class="rightNumber allRightNumber">
                                                        <p><span>0</span>人</p>
                                                        <span class="periodTime all">全部</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row margin-top-30">
                                        <div class="col-xs-9 statisticsChartBox">
                                            <p class="chartTitle">
                                                <span class="chartTitleData">0000-00-00</span>
                                                <span class="chartSample"><i></i>预约人数</span>
                                            </p>
                                            <div class="chartArea" id="chartArea"></div>
                                        </div>
                                        <div class="col-xs-3 datapickerBox">
                                            <div class='calendar' id='calendar'></div>
                                        </div>
                                    </div>
                                </div>
                            @else
                            <!--管理员统计页面-->
                                <div class="row adminStatistics">
                                    <div class="col-xs-12">
                                        <h4 class="text-center tit_Fonts">医生出诊情况统计</h4>
                                        <div class="row margin-top-15">
                                            <div class="col-xs-6 adminStatisticsDate">
                                                <span>选择查看日期</span>
                                                <div class="periodTime">
                                                    <input type="text" class="form-control limitStartData but_Fonts" data-toggle="datepicker" placeholder="开始时间" name="start_time">
                                                    <span>至</span>
                                                    <input type="text" class="form-control limitStartData but_Fonts" data-toggle="datepicker" placeholder="结束时间" name="end_time">
                                                </div>
                                            </div>
                                            <div class="col-xs-3 hospitalSelect">
                                                <span>医院</span> <!-- 系统管理员用户显示 -->
                                                <select class="form-control m-b margin-bottom-0 but_Fonts" name="hospital_id">
                                                    @if($hospitals instanceof \Illuminate\Database\Eloquent\Collection)
                                                        @foreach($hospitals as $hospital)
                                                            <option value="{{ $hospital->id }}">{{ $hospital->name }}</option>
                                                        @endforeach
                                                    @else
                                                        <option value="{{ $hospitals->id }}">{{ $hospitals->name }}</option>
                                                    @endif
                                                </select>
                                            </div>
                                            <div class="col-xs-3">
                                                <button type="button" class="btn btn-primary but_Fonts" id="adminStatisticsSearchBtn">查询</button>
                                            </div>
                                        </div>
                                        <div class="row margin-top-15">
                                            <div class="col-xs-12">
                                                <table class="table-bordered text-center reservationCenter-table adminStatistics-table" id="adminStatisticsTable"></table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>

                        <!--患者池页面-->
                        <div role="tabpanel" class="tab-pane" id="patientPool">
                            <!--搜索栏-->
                            <div class="row">
                                <div class="col-xs-12 background-white">
                                    <div class="row searchBox" id="patientPoolSearch">
                                        <div class="col-xs-2 width-020 dataSerialize">
                                            <span class="but_Fonts">姓名</span>
                                            <input maxlength="16" type="text" class="form-control" placeholder="请输入姓名" name="name">
                                        </div>
                                        <div class="col-xs-2 width-020 dataSerialize">
                                            <span class="but_Fonts">手机号</span>
                                            <input maxlength="11" type="number" class="form-control phoneLength" placeholder="请输入手机号" name="phone">
                                        </div>
                                        <div class="col-xs-3 width-032 dataSerialize">
                                            <span class="but_Fonts">预约日期</span>
                                            <div class="periodTime">
                                                <input type="text" class="form-control limitStartData" data-toggle="datepicker" placeholder="开始时间" data-name="times" name="start_time">
                                                <span>至</span>
                                                <input type="text" class="form-control limitStartData" data-toggle="datepicker" placeholder="结束时间" data-name="times" name="end_time">
                                            </div>
                                        </div>
                                        @if($user->isDoctor())
                                            <!--医生用户 显示-->
                                                <div class="col-xs-2 width-022 dataSerialize">
                                                    <span>接诊情况</span>
                                                    <select class="form-control m-b margin-bottom-0" name="is_reception">
                                                        <option value="">请选择</option>
                                                        <option value="1">未接诊过</option>
                                                        <option value="2">接诊过</option>
                                                    </select>
                                                </div>
                                        @else
                                                {{--<!--管理员用户  显示-->--}}
                                                {{--<div class="col-xs-2 width-022 dataSerialize">--}}
                                                    {{--<span>状态</span>--}}
                                                    {{--<select class="form-control m-b margin-bottom-0" name="status">--}}
                                                        {{--<option value="">请选择</option>--}}
                                                        {{--<option value="1">未分配</option>--}}
                                                        {{--<option value="2">待确认</option>--}}
                                                    {{--</select>--}}
                                                {{--</div>--}}
                                        @endif
                                        <div class="col-xs-1 text-center width-006">
                                            <button type="button" class="btn btn-primary but_Fonts" data-id="patientPoolSearch" id="patientPoolSearchBtn">查询</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 按钮操作栏 -->
                            <div class="row padding-tb-20 operationBtnBox">
                                <div class="col-xs-12">
                                @if($user->isDoctor())
                                    <!--医生用户显示-->
                                        <button type="button" class="btn btn-primary but_Fonts" id="doctorAcceptBtn">接受</button>
                                        <button type="button" class="btn btn-primary but_Fonts" id="doctorRefusedBtn">拒绝</button>
                                    @else

                                        <!--管理员用户显示-->
                                        {{--<button type="button" class="btn btn-primary" id="randomlyAssignedBtn">一键随机分配</button>--}}
                                        {{--<button type="button" class="btn btn-primary" id="selectDistributionBtn">选择分配</button>--}}

                                    @endif
                                </div>
                            </div>
                            <!--患者列表-->
                            <div class="row">
                                <div class="col-xs-12 reservationListBox">
                                    <table class="table-bordered table-hover text-center reservationCenter-table reservationList-table">
                                        <thead>
                                        <tr>
                                            <th>
                                                <lable><input type="checkbox" class="checkBox" data-id="patientPoolListBody"></lable>
                                            </th>
                                            <th>姓名</th>
                                            <th>性别</th>
                                            <th>年龄</th>
                                            <th>手机号</th>
                                            <th>预约时间</th>
                                            @if($user->isA('doctor'))
                                                <!--医生用户 显示-->
                                                    <th>是否接诊过</th>
                                                    <th>操作</th>
                                                @else
                                                <!--管理员用户  显示-->
                                                    <th>操作</th>
                                            @endif
                                        </tr>
                                        </thead>
                                        <tbody id="patientPoolListBody"></tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row margin-top-15">
                                <div class="col-xs-12 pagerBox text-right">
                                    <nav>
                                        <ul class="pagination pagination-lg" id="patientPoolPager">
                                            <li class="prev disabled"><a href="javascript:;">上一页</a></li>
                                            <li class="page active"><a href="javascript:;">1</a></li>
                                            <li class="page"><a href="javascript:;">2</a></li>
                                            <li class="page"><a href="javascript:;">3</a></li>
                                            <li class="page"><a href="javascript:;">4</a></li>
                                            <li class="page"><a href="javascript:;">5</a></li>
                                            <li class="next"><a href="javascript:;">下一页</a></li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>

                        <!--信息中心页面-->
                        <div role="tabpanel" class="tab-pane" id="messageCenter">
                            <!--搜索栏-->
                            <div class="row">
                                <div class="col-xs-12 background-white">
                                    <div class="row searchBox">
                                        <div class="col-xs-3 width-032">
                                            <span class="but_Fonts">预约日期</span>
                                            <div class="periodTime">
                                                <input type="text" class="form-control limitEndData"
                                                       data-toggle="datepicker" placeholder="开始时间" name="start_time">
                                                <span class="but_Fonts">至</span>
                                                <input type="text" class="form-control limitEndData"
                                                       data-toggle="datepicker" placeholder="结束时间" name="end_time">
                                            </div>
                                        </div>
                                        {{--<div class="col-xs-2 width-022">--}}
                                        {{--<span>时间段</span>--}}
                                        {{--<select class="form-control m-b margin-bottom-0" name="">--}}
                                        {{--<option value="1">8：00-9：00</option>--}}
                                        {{--<option value="2">9：00-10：00</option>--}}
                                        {{--<option value="3">10：00-11：00</option>--}}
                                        {{--</select>--}}
                                        {{--</div>--}}
                                        <div class="col-xs-1 text-center width-006">
                                            <button type="button" class="btn btn-primary but_Fonts" id="messageCenterSearchBtn">
                                                查询
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--患者列表-->
                            <div class="row margin-top-20">
                                <div class="col-xs-12 reservationListBox">
                                    <table class="table-hover reservationCenter-table messageCenter-table">
                                        <tbody id="messageListBody"></tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row margin-top-15">
                                <div class="col-xs-12 pagerBox text-right">
                                    <nav>
                                        <ul class="pagination pagination-lg" id="messageCenterPager"></ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 修改诊室 Modal -->
            <div class="modal fade" id="editClinic" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true" data-backdrop="static" data-keyboard=false>
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h3 class="modal-title">选择诊室</h3>
                        </div>
                        <div class="modal-body">
                            <div class="modal-textarea-box">
                                <span>诊室</span>
                                <select class="form-control m-b zsWeightChangeSelect margin-bottom-0" name="clinic">
                                    <option value="1">诊室 1</option>
                                    <option value="2">诊室 2</option>
                                    <option value="3">诊室 3</option>
                                </select>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary" id="editClinicSaveBtn">修改</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 推送消息 和 发送短信 Modal -->
            <div class="modal fade" id="editMessage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true" data-backdrop="static" data-keyboard=false>
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                            <h3 class="modal-title">编辑信息</h3>
                        </div>
                        <div class="modal-body">
                            <div class="modal-textarea-box">
                                <span>信息内容</span>
                                <textarea name="message" rows="7">消息内容模版</textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary">发送</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 选择分配（选择医生分配） Modal -->
            <div class="modal fade" id="selectDistribution" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true" data-backdrop="static" data-keyboard=false>
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                            <h3 class="modal-title">选择医生</h3>
                        </div>
                        <div class="modal-body">
                            <div class="selectDoctorBox"></div>
                            {{--<div class="modal-textarea-box margin-top-15">--}}
                                {{--<span>信息内容</span>--}}
                                {{--<textarea name="message" rows="5">消息内容模版</textarea>--}}
                            {{--</div>--}}
                            <div class="sendMessageType margin-top-15">
                                {{--    //todo 功能尚未开发
                                <label>
                                    <input type="checkbox" value="1">
                                    <span>推送消息</span>
                                </label>
                                --}}
                                {{--<label>--}}
                                    {{--<input type="checkbox" value="2" checked disabled>--}}
                                    {{--<span>发送短信</span>--}}
                                {{--</label>--}}
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary" id="selectDistributionSaveBtn">确认</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 管理员统计 查看 预约信息 Modal -->
            <div class="modal fade" id="adminViewReservation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true" data-backdrop="static" data-keyboard=false>
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                            <h3 class="modal-title">预约信息</h3>
                        </div>
                        <div class="modal-body">
                            <div class="tableArea">
                                <img src="{{ asset('images/loading.gif') }}">
                            </div>
                            <div class="row margin-top-15">
                                <div class="col-xs-12 pagerBox text-right">
                                    <nav>
                                        <ul class="pagination pagination-lg" id="messageModalPager"></ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @if ($user->isDoctor())
        <!--统计页面  自定义日历插件 1-->
        <script src="{{ asset('js/customDatapicker.js') }}"></script>
        <!--统计页面  图表插件 1-->
        <script src="{{ asset('js/highcharts.js') }}"></script>
    @endif
    <!--预约中心 单独文件  1-->
    <script src="{{ asset('js/reservationCenterAll.js') }}"></script>
    <script>
        $('#side-menu li.reservationCenter').addClass('active');//更改导航列表选中样式   不可删除
    </script>
@endsection